// 提供一个能够显示Xtx-message组件的函数
// 函数的作用： 将来直接导入使用， 也可以挂载在vue实例上使用
// import Message from '@/components/library/Message.js'  使用方法:  Message({type:warn,test:'请输入密码'})
//  this.$message({type:warn,test:'请输入密码'})

import { createVNode, render } from 'vue'
import XtxMessage from './xtx-message.vue'

const div = document.createElement('div')
div.setAttribute('class', 'xtx-message-container')
document.body.appendChild(div)

// 定时器
const timer = null

export default ({ type, text }) => {
  // 渲染组件
  // 1.导入消息提示组件
  // 2.将消息提示组件编译为虚拟dom结点  createVnode('组件',{属性对象})
  // 3.准备一个装虚拟dom的容器
  // 4.将虚拟节点渲染到容器中
  const vnode = createVNode(XtxMessage, { type, text })
  render(vnode, div)
  // 开启定时 移除dom容器中的内容
  clearTimeout(timer)
  setTimeout(() => {
    render(null, div)
  }, 2000)
}
